<template>
  <BasicDrawer
    v-bind="$attrs"
    :showFooter="true"
    @register="register"
    width="40%"
    @ok="setTimeout(closeDrawer)"
  >
    <!-- 右边基本表格 -->
    <BasicTable @register="registerTable">
      <!-- 表格标题 -->
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ title }} </span>
      </template>
    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsM8MachineTipsList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, onMounted, ref } from 'vue';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, useTable } from '/@/components/Table';
  import { listSet }  from '/@/api/layout/layout';

  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { tabConfigData } from '/@/utils/custom';
  import { findSjMachine, findGcjMachine } from '/@/api/m8/machine/machine';

  let tableColumns = ref<any>([]);
  let layVoucherView = ref<any>({});
  let listTabConfig = ref<any>({});
  let title = ref('');
  const getTitle = ref({
    // 表格标题图标
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: title,
  });
  let api = ref<any>();

  const [registerTable, { reload, setProps }] = useTable({
    useSearchForm: false,
    columns: tableColumns,
    canColDrag: true,
    pagination: false,
  });

  const [register, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({
      maskClosable: true,
      width: '80%',
      showOkBtn: false,
    });
    title.value = data.openType === '0' ? '首检机床' : '过程检机床';
    api.value = data.openType === '0' ? findSjMachine : findGcjMachine;

    const res = await listSet({ viewCode: 'M8_machine_tip_list' });
    layVoucherView.value = res.layVoucherView;

    tableColumns.value = layVoucherView.value.flistTabCols; //表格表头

    listTabConfig.value = tabConfigData(res.layVoucherView.listTabConfig);
    setProps({
      api: api.value,
      beforeFetch: (params) => {
        return params;
      },
      autoCreateKey: listTabConfig.value.autoCreateKey,
      bordered: listTabConfig.value.bordered,
      canResize: listTabConfig.value.canResize,
      clearSelectOnPageChange: listTabConfig.value.clearSelectOnPageChange,
      clickToRowSelect: listTabConfig.value.clickToRowSelect,
      ellipsis: listTabConfig.value.ellipsis,
      emptyDataIsShowTable: listTabConfig.value.emptyDataIsShowTable,
      inset: listTabConfig.value.inset,
      isTreeTable: listTabConfig.value.isTreeTable,
      pagination: listTabConfig.value.pagination,
      showIndexColumn: listTabConfig.value.showIndexColumn,
      showSummary: listTabConfig.value.showSummary,
      showTableSetting: listTabConfig.value.showTableSetting,
      striped: listTabConfig.value.striped,
      useSearchForm: false,
      tableSetting: listTabConfig.value.tableSetting,
      titleHelpMessage: listTabConfig.value.titleHelpMessage,
      maxHeight: listTabConfig.value.maxHeight,
      resizeHeightOffset: listTabConfig.value.resizeHeightOffset,
    });
    reload();
  });

  onMounted(async () => {});
</script>
